<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="用户名称">
          <el-input v-model="form.name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="用户编码">
          <el-input
            v-model="form.user_id"
            placeholder="请输入用户编码"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="品牌">
          <el-select v-model="form.region" placeholder="请选择送水的品牌">
            <el-option v-for="(item, index) in Data" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <div class="ktSum">
        <p>空桶押金收入(总计):{{ this.ktIncome.payed }}</p>
        <p>退空桶押金(总计):{{ this.ktIncome.refund }}</p>
        <p>实收空桶押金(总计):{{ this.ktIncome.reality }}</p>
      </div>
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        border
        style="width: 100%"
        max-height="600"
      >
        <!-- <el-table-column label="序号" type="index" width="55" :index="indexMethod" align="center">
        </el-table-column> -->
        <el-table-column prop="id" align="center" label="ID"> </el-table-column>
        <el-table-column prop="nickname" align="center" label="用户名">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="avatar"
          label="用户头像"
          width="120"
        >
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.avatar"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="kt_pledge" align="center" label="已购空桶">
        </el-table-column>
        <!-- <el-table-column prop="mobile" align="center" label="用户手机号">
        </el-table-column> -->
        <el-table-column prop="operand" align="center" label="空桶金额">
        </el-table-column>
        <el-table-column prop="my_kt_ktpledge" align="center" label="自有空桶">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              size="mini"
              type="primary"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pageUser">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 150, 200, 300]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="90%"
      :before-close="handleClose"
    >
      <el-tabs
        type="border-card"
        v-model="activeName"
        @tab-click="tabssevaluate"
      >
        <el-tab-pane label="购桶" name="1"></el-tab-pane>
        <el-tab-pane label="退桶" name="2"></el-tab-pane>
        <el-table
          ref="multipleTable"
          :data="examine"
          tooltip-effect="dark"
          style="width: 100%"
          max-height="600"
          @selection-change="handleSelectionChange"
          border
        >
          <!-- <el-table-column type="selection" width="55">
          </el-table-column> -->
          <el-table-column prop="order_id" label="订单号" align="center">
          </el-table-column>
          <el-table-column
            prop="order_type_text"
            align="center"
            label="订单类型"
          >
          </el-table-column>
          <el-table-column
            prop="ctime"
            align="center"
            :label="order_type == 11 ? '售后时间' : '购买时间'"
          >
          </el-table-column>
          <!-- <el-table-column
            v-if="order_type == 11"
            prop="ctime"
            align="center"
            label="售后时间"
          >
          </el-table-column> -->
          <!-- <el-table-column
            show-overflow-tooltip
            align="center"
            prop="authority_confirm_img"
            label="用户头像"
            width="120"
          >
            <template slot-scope="scope">
              <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.authority_confirm_img"
                fit="cover"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="service_time" align="center" label="预约时间">
          </el-table-column> -->
          <el-table-column prop="status" align="center" label="订单状态">
          </el-table-column>
          <el-table-column prop="nickname" align="center" label="用户名称">
          </el-table-column>
          <!-- <el-table-column prop="user_mobile" align="center" label="用户手机号">
          </el-table-column> -->
          <!-- <el-table-column
            v-if="this.order_type == 11"
            prop="ship_name"
            align="center"
            label="收货人姓名"
          >
          </el-table-column>
          <el-table-column
            v-if="this.order_type == 11"
            prop="ship_mobile"
            align="center"
            label="收货人手机号"
          >
          </el-table-column>
          <el-table-column
            v-if="this.order_type == 11"
            prop="shouhuoAddress"
            align="center"
            show-overflow-tooltip
            label="收货地址"
          >
          </el-table-column> -->
          <el-table-column
            v-if="order_type == 10"
            prop="payed"
            align="center"
            label="订单总额"
          >
          </el-table-column>
          <el-table-column
            v-if="order_type == 11"
            prop="refund"
            align="center"
            label="退款总额"
          >
          </el-table-column>
          <!-- <el-table-column prop="address" label="操作" >
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handle(scope.row)">编辑</el-button>
          </template>
        </el-table-column> -->
        </el-table>
      </el-tabs>

      <div class="pageUser">
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="page1"
          :page-sizes="[10, 150, 200, 300]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total1"
        >
        </el-pagination>
      </div>
    </el-dialog>
  </el-card>
</template>
  
<script>
import { emptyBucket, brandList, emptyBarrel } from "../../../../utils/api.js";
import { getEmptyBucketDeposit } from "../../../../utils/main";
export default {
  data() {
    return {
      token: sessionStorage.getItem("token"),
      //请求特效
      loading: false,
      //弹窗
      dialogVisible: false,
      form: {
        name: "",
        user_id: "",
      },
      label_text: "",
      examine: [
        {
          order_id: "",
          order_type: "",
          service_time: "",
          ctime: "",
          status: "",
          nickname: "",
          user_mobile: "",
          ship_name: "",
          ship_mobile: "",
          shouhuoAddress: "",
          payed: "",
          authority_confirm_img: "",
          order_type_text: "",
        },
      ],
      imgHeader: this.Global.imgHeader,

      //展示数据
      tableData: [
        {
          nickname: "",
          avatar: "",
          my_kt_ktpledge: "",
          kt_pledge: "",
          operand: "",
          mobile: "",
        },
      ],
      ktIncome: {},
      page: 1,
      limit: 10,
      total: 0,
      page1: 1,
      limit1: 10,
      total1: 0,
      order_type: 10,
      activeName: "1",
      user_id: "",
      // Data: []
    };
  },
  methods: {
    tabssevaluate(tab, event) {
      if (tab.index == 0) {
        this.order_type = 10;
      }
      if (tab.index == 1) {
        this.order_type = 11;
      }
      this.emptyBarrels();
    },
    //日期
    // timeChange(e) {
    //   let date = new Date(e);
    //   let year = date.getFullYear();
    //   let month = date.getMonth() + 1;
    //   let day = date.getDate();
    //   this.form.time = year + "-" + month;
    // },
    onSubmit() {
      (this.page = 1), (this.limit = 10), this.emptyBuckets();
    },
    onReset() {
      (this.form.user_id = ""), (this.form.name = "");
      this.emptyBuckets();
    },
    //分页器
    handleSizeChange(val) {
      this.limit = val;
      this.emptyBuckets();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.emptyBuckets();
    },
    handleSizeChange1(val) {
      this.limit1 = val;
      this.emptyBarrels();
    },
    handleCurrentChange1(val) {
      this.page1 = val;
      this.emptyBarrels();
    },
    // 序号排序
    indexMethod(index) {
      if (this.token < this.limit) {
        return this.total - index;
      } else {
        return this.total - (this.page - 1) * this.limit - index;
      }
    },
    //查看
    handleClick(row) {
      console.log(row);
      let obj = JSON.parse(JSON.stringify(row));
      // this.tableData.mobile = obj.mobile;
      this.user_id = obj.id;
      this.dialogVisible = true;
      this.emptyBarrels();
    },
    //关闭
    handleClose(done) {
      this.activeName = "1";
      this.order_type = 10;
      done();
      this.emptyBuckets();
    },
    //获取用户列表数据
    emptyBuckets() {
      this.loading = true;
      emptyBucket(
        this.token,
        this.page,
        this.limit,
        this.form.user_id,
        this.form.name
      )
        .then((res) => {
          if (res.data.status) {
            this.tableData = res.data.data.data;
            this.total = res.data.data.count;
            this.tableData.forEach((item) => {
              if (item.avatar) {
                item.avatar = item.avatar;
                item.avatar = this.imgHeader + item.avatar;
                item.operand = item.kt_pledge * 50;
              }
              if (item.my_kt_ktpledge == 0) {
                item.my_kt_ktpledge = "无";
              }
            });
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    // 获取空桶押金收入
    emptyDeposit() {
      getEmptyBucketDeposit(this.token)
        .then((res) => {
          if (res.data.status) {
            this.ktIncome = res.data.data;
            this.ktIncome.reality =
              parseFloat(this.ktIncome.payed.toFixed(2)) -
              parseFloat(this.ktIncome.refund.toFixed(2));
            // this.total = res.data.data.count;
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    handleSelectionChange() {},
    //品牌
    // trademark() {
    //   this.loading = true
    //   brandList(this.token, this.page1, this.limit1, '').then(res => {
    //     if (res.data.status) {
    //       this.Data = res.data.data.data
    //       let timer = setTimeout(() => {
    //         this.loading = false
    //         clearTimeout(timer)
    //       }, 400)
    //     } else {
    //       if (res.data.msg == "token失效,请重新进行登录") {
    //         this.$router.push("/login");
    //       }
    //       if (res.data.msg == "此账号没有权限") {
    //         this.$message.error(res.data.msg);
    //         this.loading = false
    //       }
    //       let timer = setTimeout(() => {
    //         this.$message.error(res.data.msg);
    //       }, 5000)
    //     }

    //   }).catch(err => {
    //     console.log(err.message)
    //   })
    // },
    //获取列表数据
    emptyBarrels() {
      this.loading = true;
      emptyBarrel(
        this.token,
        this.page1,
        this.limit1,
        this.order_type,
        this.user_id
      )
        .then((res) => {
          if (res.data.status) {
            this.examine = res.data.data.data;
            this.total1 = res.data.data.count;
            this.examine.forEach((item) => {
              if (item.authority_confirm_img) {
                item.authority_confirm_img =
                  this.imgHeader + item.authority_confirm_img;
              }
              if (this.order_type == 11) {
                item.order_type_text = "退桶押金";
                if (item.status == 1) {
                  item.status = "正常";
                }
                if (item.status == 2) {
                  item.status = "完成";
                }
                if (item.status == 3) {
                  item.status = "取消";
                }
              }
              if (this.order_type == 10) {
                item.order_type_text = "购买桶押金";
                if (item.pay_status == 1) {
                  item.status = "未付款";
                } else if (item.pay_status == 2) {
                  item.status = "已付款";
                } else if (item.pay_status == 3) {
                  item.status = "部分付款";
                } else if (item.pay_status == 4) {
                  item.status = "部分退款";
                } else if (item.pay_status == 5) {
                  item.status = "已退款";
                }
              }
              item.shouhuoAddress = item.ship_address_ds + item.ship_address;
              if (item.ship_address_ds == null && item.ship_address == null) {
                item.shouhuoAddress = "";
              }
            });
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
  },
  mounted() {
    this.emptyBuckets();
    this.emptyDeposit();
    // this.trademark()
  },
};
</script>
  
<style scoped>
.length {
  width: 320px;
}
.ktSum {
  display: flex;
  justify-content: flex-end;
  font-size: 18px;
  margin-bottom: 10px;
}
.ktSum p {
  margin-right: 10px;
  margin-left: 20px;
  color: rgba(249, 100, 34, 1);
}
</style>